<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户编号：">
        <el-input v-model="ruleForm.id" disabled class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="用户地址：">
        <el-input v-model="ruleForm.addres" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="用户备注：">
        <el-input v-model="ruleForm.mark" type="textarea" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="用户分组：">
        <el-select v-model="ruleForm.groupId" placeholder="请选择"  class="selWidth" clearable filterable>
          <el-option :value="item.id" v-for="(item, index) in groupList" :key="index" :label="item.groupName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户标签：">
        <el-select v-model="labelData" placeholder="请选择"  class="selWidth" clearable filterable multiple >
          <el-option :value="item.id" v-for="(item, index) in labelLists" :key="index" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推广员">
        <el-radio-group v-model="ruleForm.isPromoter">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" v-hasPermi="['admin:user:update']">提交</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
  import { groupListApi, levelListApi, tagListApi, userInfoApi, userUpdateApi } from '@/api/user'
  import {Debounce} from '@/utils/validate'
  const defaultObj = {
   // birthday: '',
   // cardId: '',
    id : null,
    mark: '',
  //  phone: '',
   // realName: '',
    addres:'',
    groupId: '',
    level: '',
    isPromoter: false,
    status: false
  }
  export default {
    name: "UserEdit",
    props:{
      uid: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        ruleForm: Object.assign({}, defaultObj),
        groupData: [],
        labelData: [],
        labelLists: [],
        levelList: [],
        groupList: [],
        rules: {}
      }
    },
    mounted() {
      if(this.uid) this.userInfo()
      this.groupLists()
      this.levelLists()
      this.getTagList()
    },
    methods: {
      // 详情
      userInfo () {
        //userInfoApi({ id: this.uid}).then(async res => {
        //后期接口调用
        let res = {"uid":7933,"account":"15812980822","realName":"","birthday":"","cardId":"","mark":"","partnerId":null,"groupId":"","tagId":"","nickname":"b1f372d99453","avatar":"https://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg","phone":"15812980822","sex":0,"country":"CN","addIp":"","lastIp":"","nowMoney":"0.00","brokeragePrice":"0.00","integral":0,"experience":0,"signNum":0,"status":true,"level":0,"spreadUid":0,"spreadTime":null,"userType":"h5","isPromoter":false,"payCount":0,"spreadCount":0,"addres":"","adminid":0,"loginType":"","updateTime":"2022-10-25 00:15:13","createTime":"2022-10-25 00:15:13","lastLoginTime":"2022-10-25 00:15:13","cleanTime":null,"path":"/0/","subscribe":false,"promoterTime":null};

          this.ruleForm = {
            //本身注释
           // birthday: res.birthday,
           // cardId: res.cardId,
            id : res.uid,
            mark: res.mark,
           // phone: res.phone,
           // realName: res.realName,
            status: res.status,
            addres: res.addres,
            groupId: Number(res.groupId) || '',
            level: res.level || '',
            isPromoter: res.isPromoter,
            tagId: res.tagId || ''
          }
          this.labelData = res.tagId ? res.tagId.split(',').map(Number): []
        //})
      },
      // 分组列表
      groupLists () {
        //groupListApi({ page: 1, limit: 9999}).then(async res => {
        //后期接口调用
        let res = {"page":1,"limit":9999,"totalPage":1,"total":58,"list":[{"id":8,"groupName":"jjj"},{"id":9,"groupName":"q"},{"id":10,"groupName":"ewq"},{"id":11,"groupName":"新建会员分组"},{"id":12,"groupName":"ll"},{"id":13,"groupName":"11"},{"id":14,"groupName":"test001"},{"id":15,"groupName":"初级会员"},{"id":16,"groupName":"教育厅"},{"id":17,"groupName":"test111"},{"id":18,"groupName":"的"},{"id":19,"groupName":"11"},{"id":20,"groupName":"22"},{"id":21,"groupName":"33"},{"id":22,"groupName":"44"},{"id":23,"groupName":"123213"},{"id":24,"groupName":"qwewqe"},{"id":26,"groupName":"qwewqeasd123"},{"id":27,"groupName":"123213"},{"id":28,"groupName":"钻石会员"},{"id":29,"groupName":"500元组"},{"id":30,"groupName":"查查"},{"id":31,"groupName":"丝袜用户"},{"id":32,"groupName":"我的分组"},{"id":33,"groupName":"自定义分组1"},{"id":34,"groupName":"111"},{"id":35,"groupName":"1111"},{"id":36,"groupName":"qqqq"},{"id":37,"groupName":"qqqq"},{"id":38,"groupName":"111"},{"id":39,"groupName":"1"},{"id":40,"groupName":"1"},{"id":41,"groupName":"123"},{"id":42,"groupName":"hltest"},{"id":43,"groupName":"hltest"},{"id":44,"groupName":"啊"},{"id":45,"groupName":"hyk"},{"id":46,"groupName":"门店管理员"},{"id":47,"groupName":"das"},{"id":48,"groupName":"test"},{"id":49,"groupName":"商业分组"},{"id":50,"groupName":"超级VIP"},{"id":51,"groupName":"666"},{"id":52,"groupName":"fsdfsd"},{"id":53,"groupName":"志愿者"},{"id":54,"groupName":"低保户"},{"id":55,"groupName":"v韩剧 "},{"id":56,"groupName":"666"},{"id":57,"groupName":"234"},{"id":58,"groupName":"复购"},{"id":59,"groupName":"sd "},{"id":60,"groupName":"1212"},{"id":61,"groupName":"士大夫撒地方"},{"id":62,"groupName":"的士大夫撒地方"},{"id":63,"groupName":"eassa"},{"id":64,"groupName":"好分组"},{"id":65,"groupName":"我我哦哦我我哦645564"},{"id":66,"groupName":"tom"}]};

          this.groupList = res.list
        //})
      },
      //标签列表
      getTagList () {
        //tagListApi({ page: 1, limit: 9999}).then(res => {
        //后期接口调用
        let res = {"page":1,"limit":9999,"totalPage":1,"total":21,"list":[{"id":52,"name":"aa"},{"id":53,"name":"11"},{"id":54,"name":"bb"},{"id":55,"name":"bb"},{"id":56,"name":"哈哈哈"},{"id":57,"name":"事儿精"},{"id":58,"name":"weqrwer"},{"id":59,"name":"21221"},{"id":60,"name":"as"},{"id":61,"name":"123"},{"id":62,"name":"111111111111111"},{"id":63,"name":"11111111111111111111111111111111111111"},{"id":64,"name":"11111111111111111111111111111111111111111111"},{"id":65,"name":"22222222222222222222222222222222222222222222222222"},{"id":66,"name":"hong"},{"id":67,"name":"."},{"id":68,"name":"ssss"},{"id":69,"name":"d'd'd"},{"id":70,"name":"高消费客户"},{"id":71,"name":"12"},{"id":72,"name":"ccdd"}]};

          this.labelLists = res.list
        //})
      },
      // 等级列表
      levelLists () {
        //levelListApi().then(async res => {
        //后期接口调用
        let res = [{"id":1,"name":"普通会员","experience":1,"isShow":true,"grade":1,"discount":100,"icon":"https://api.java.crmeb.net/crmebimage/public/maintain/2021/10/13/ce34f7cf454846a28b152049ba5494417vok0wvl7l.png","isDel":false,"updateTime":"2021-11-09 16:38:53","createTime":"2021-09-01 11:29:20"},{"id":2,"name":"黄铜会员","experience":500,"isShow":true,"grade":2,"discount":90,"icon":"https://api.java.crmeb.net/crmebimage/user/2021/08/09/8b41cacd284e4da8a01b6c139716eaa0f5nunj66l4.png","isDel":false,"updateTime":"2021-09-29 16:41:37","createTime":"2021-09-09 15:02:43"},{"id":3,"name":"白银会员","experience":999,"isShow":true,"grade":3,"discount":85,"icon":"https://api.java.crmeb.net/crmebimage/public/maintain/2021/10/13/197514463aad4dbf88cd4266ad35254a18dwgv0dt8.png","isDel":false,"updateTime":"2021-11-09 16:39:24","createTime":"2021-09-14 16:07:23"},{"id":5,"name":"黄金会员","experience":10000,"isShow":true,"grade":4,"discount":80,"icon":"https://api.java.crmeb.net/crmebimage/public/maintain/2021/10/13/0b832422ad3b4987b15ab10b3009a551cu8tccg6ej.png","isDel":false,"updateTime":"2021-11-09 16:39:36","createTime":"2021-09-27 09:59:20"},{"id":4,"name":"钻石会员","experience":12000,"isShow":true,"grade":6,"discount":70,"icon":"https://api.java.crmeb.net/crmebimage/public/maintain/2021/10/13/703948f0db5a453f8be387323fe82f80wyw14ya38y.png","isDel":false,"updateTime":"2022-08-12 13:47:05","createTime":"2021-09-14 16:30:20"},{"id":12,"name":"超级黑金会员","experience":999999,"isShow":true,"grade":7,"discount":3,"icon":"https://api.java.crmeb.net/crmebimage/public/content/2022/08/12/80723379d454425d8bfb17aee5fe3aaax4xcsz5owu.png","isDel":false,"updateTime":"2022-08-15 20:04:59","createTime":"2022-08-15 20:04:59"},{"id":14,"name":"werwer","experience":1000000,"isShow":false,"grade":8,"discount":6,"icon":"https://api.java.crmeb.net/crmebimage/public/content/2022/08/26/bfcfa6e8255c48279268bf887d316204sum1gm82im.png","isDel":false,"updateTime":"2022-08-26 14:30:07","createTime":"2022-08-26 14:30:07"},{"id":13,"name":"地方","experience":10000000,"isShow":false,"grade":10,"discount":1,"icon":"https://api.java.crmeb.net/crmebimage/public/maintain/2022/08/19/6b1c504ee1b34315a043421189d24b1b8jzjli4ixj.jpg","isDel":false,"updateTime":"2022-08-20 10:24:21","createTime":"2022-08-20 10:24:21"},{"id":15,"name":"超级大会员","experience":100000000,"isShow":false,"grade":10000,"discount":1,"icon":"https://api.java.crmeb.net/crmebimage/public/maintain/2022/10/14/93d36bc1ee3c4deebde58d5d8e9e7c39u7y1mgcp9i.jpg","isDel":false,"updateTime":"2022-10-18 09:48:55","createTime":"2022-10-18 09:48:55"}];

          this.levelList = res.list
        //})
      },
      submitForm:Debounce(function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.tagId=this.labelData.join(',')
            userUpdateApi({id: this.ruleForm.id},this.ruleForm).then(async res => {
              this.$message.success('编辑成功')
              this.$parent.$parent.visible = false
              this.$parent.$parent.getList()
            })
          } else {
            return false;
          }
        });
      }),
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetForm');
      }
    }
  }
</script>

<style scoped>
 .selWidth{
   width: 90%;
 }
</style>
